// 所有的题目的类型，其实就是两个类型： 选择 ， 填空
// 把两个类型的题目进行拆分，写成两个组件
// 当前这个就是选题题的组件

import OptionItem from "./OptionItem";
import { QuestionTypeMap } from '@/utils/common'
import { useState } from "react";
import { Button, Toast } from "antd-mobile";
import { validateAnswerApi } from '@/api'
import { useLocation } from "react-router-dom";

interface IProp {
  data: IQustion
}

export default function Options({ data }: IProp) {

  const answerList: IQuetionType[] = JSON.parse(data.optionContent);

  // 控制选项是否勾选的思路：
  // 1. 在父组件 (当前这个组件) 里面存一个 答案的数组 - 有可能是单选，也可能是多选，所以在这个数组中，存A/B/C/D/E ..
  // 2. 把数组传递给 选项组件
  // 3. 在选项组件内部判断 ， 父组件的 数组里面是否包含我的 字母 ， 如果包含，就是勾选
  const [userAnaswers, setUserAnswers] = useState<string[]>(['B'])

  // 选项组件被点击，子传父的函数
  const change = (value: string) => {
    // 判断 
    // 如果是多选
    if (data.questionType === 'many') {
      // 如果 数组里面已经有了对应的答案，就是取消
      const idx = userAnaswers.indexOf(value)
      if (idx !== -1) {
        userAnaswers.splice(idx, 1)
        setUserAnswers([...userAnaswers])
      } else {
        // 保留原有的，同时放入新的
        setUserAnswers([...userAnaswers, value])
      }

    } else {
      // 如果是单选
      setUserAnswers([value])
    }
  }

  const location = useLocation()
  const checkAnswer = () => {
    // 对比已经勾选的答案是否和 参考答案一致
    // 注意： 要先对答案进行排序，再对比
    if (userAnaswers.sort().join(',') === data.answer) {
      // 回答正确
      Toast.show({
        icon: 'success',
        content: '回答正确'
      })
    } else {
      // 回答错误
      Toast.show({
        icon: 'fail',
        content: '回答错误'
      })
    }
    validateAnswerApi({
      id: data.id,
      actionCode: location.state.actionCode,
      categoryCode: data.categoryCode,
      actionType: 'exam_test',
      userAnswer: userAnaswers.sort().join(',')
    }).then(res => {
      // 这里面自己做
    })
  }

  return <div className="options">
    <div className="header flex">
      <div className="type">{QuestionTypeMap[data.questionType]}</div>
      <div className="title">{data.title}</div>
    </div>
    {
      answerList.map(item => <OptionItem onChange={change} checks={userAnaswers} key={item.key} data={item} />)
    }
    <div>
      <Button color="primary" fill='outline' onClick={checkAnswer}>确定</Button>
    </div>
  </div>
}